<template>
  <div class="home_wrap">
    <!-- el布局容器 -->
    <el-container>
      <!-- 左侧菜单栏 -->
      <el-aside>
        <!-- 菜单 -->
        <el-menu @select="handleSelect">
          <!-- 教务系统 -->
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-edit"></i>教务系统</template>
            <el-menu-item index="1-1">查询成绩</el-menu-item>
            <el-menu-item index="1-2">学业情况</el-menu-item>
            <el-menu-item index="1-3">考试查询</el-menu-item>
            <el-menu-item index="1-4">学生课表</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!-- 右侧内容显示区 -->
      <el-main>
        <el-scrollbar ref="bar" style="height: 100%">
          <el-backtop target=".el-scrollbar__wrap"></el-backtop>
          <!-- 显示查询成绩界面 -->
          <div v-if="selected === '1-1'">
            <get-grade />
          </div>
          <!-- 显示学业情况 -->
          <div v-if="selected === '1-2'">
            <!-- 不销毁组件，避免重复请求数据 -->
            <keep-alive>
              <academic />
            </keep-alive>
          </div>
          <!-- 显示考试查询界面 -->
          <div v-else-if="selected === '1-3'">
            <get-exam />
          </div>
          <!-- 显示课表 -->
          <div style="height: 100%" v-else-if="selected === '1-4'">
            <course />
          </div>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
</template>

<script>
  // 子组件
  import GetGrade from '@/components/home/education/GetGrade'
  import Academic from '@/components/home/education/academic/Academic'
  import GetExam from '@/components/home/education/GetExam'
  import Course from '@/components/home/education/Course/Course'

  import addMutationObserver from '@/assets/js/AddMutationObserver'
  
  // 全局的监听器
  var observer

  export default {
    name: 'Home',
    components: {
      GetGrade,
      GetExam,
      Course,
      Academic
    },
    data() {
      
      return {
        selected: ''
      }
    },
    methods: {
      // 切换菜单
      handleSelect(index) {
        this.selected = index
      }
    },
    created() {
      setTimeout(() => {
        let scrollbarWrap = document.getElementsByClassName('el-scrollbar__wrap')[0]
        observer = addMutationObserver(scrollbarWrap, () => {
          this.$refs['bar'].update()
        })
      }, 0)
    },
    beforeDestroy() {
      if(observer) {
        observer.disconnect()
      }
    }
  }
</script>

<style scoped>
  .home_wrap {
    padding: 0 40px;
    min-width: 1000px;
    height: 80vh;
  }

  /* 容器 */
  .el-container {
    border: 1px solid #eee;
    height: 100%;
    min-width: 300px;
  }

  /* 侧边栏 */
  .el-aside {
    background-color: rgb(238, 241, 246);
  }

</style>